<template>
	<view class="page-container">
	  <!-- 登录表单 -->
	  <view class="login-form">
		<!-- 手机号输入框 -->
		<view class="input-group">
		  <input
			class="input"
			type="number"
			maxlength="11"
			placeholder="请输入手机号"
			:value="phone"
			@input="handlePhoneInput"
		  />
		</view>
		
		<!-- 验证码输入框 -->
		<view class="input-group code-group">
		  <input
			class="input"
			type="number"
			maxlength="6"
			placeholder="请输入手机验证码"
			:value="code"
			@input="handleCodeInput"
		  />
		  <view 
			class="code-btn" 
			:class="{ disabled: !canSendCode }"
			@tap="sendCode"
		  >
			{{ codeText }}
		  </view>
		</view>
	  </view>
  
	  <!-- 用户协议区域 -->
	  <view class="agreement-section">
		<view class="checkbox-wrapper" @tap="toggleAgreement">
		  <view class="checkbox" :class="{ checked: isAgreed }">
			<text v-if="isAgreed" class="check-mark">✓</text>
		  </view>
		</view>
		<view class="agreement-text">
		  <text>我已阅读并同意</text>
		  <text class="link" @tap.stop="goToAgreement('user')">《用户协议》</text>
		  <text>和</text>
		  <text class="link" @tap.stop="goToAgreement('privacy')">《隐私协议》</text>
		</view>
	  </view>
  
	  <!-- 确认按钮 -->
	  <button 
		class="submit-btn" 
		:class="{ active: canSubmit }"
		@tap="handleSubmit"
	  >
		确定
	  </button>
	</view>
  </template>
  
  <script>
  import { userApi } from '@/api/user'
  
  export default {
	data() {
	  return {
		phone: '',
		code: '',
		isAgreed: false,
		countdown: 60,
		isCounting: false
	  }
	},
	computed: {
	  canSendCode() {
		return this.phone.length === 11 && !this.isCounting
	  },
	  canSubmit() {
		return this.phone.length === 11 && this.code.length === 6 && this.isAgreed
	  },
	  codeText() {
		if (this.isCounting) {
		  return `${this.countdown}s后重新获取`
		}
		return '获取验证码'
	  }
	},
	methods: {
	  handlePhoneInput(e) {
		// 处理手机号输入，限制只能输入数字且最多11位
		const value = e.detail.value.replace(/\D/g, '').slice(0, 11)
		this.phone = value
	  },
	  handleCodeInput(e) {
		// 处理验证码输入，限制只能输入数字且最多6位
		const value = e.detail.value.replace(/\D/g, '').slice(0, 6)
		this.code = value
	  },
	  toggleAgreement() {
		this.isAgreed = !this.isAgreed
	  },
	  async sendCode() {
		if (!this.canSendCode) return
		
		try {
		  // 发送验证码的API调用
		  const captchaData = {
			phone: this.phone
		  }
		  
		  const res = await userApi.getCaptcha(captchaData)
		  
		  if (res.code === 200) {
			// 开始倒计时
			this.isCounting = true
			this.startCountdown()
			
			uni.showToast({
			  title: '验证码已发送',
			  icon: 'success'
			})
		  } else {
			uni.showToast({
			  title: res.message || '验证码发送失败',
			  icon: 'none'
			})
		  }
		} catch (error) {
		  uni.showToast({
			title: error.message || '验证码发送失败',
			icon: 'none'
		  })
		}
	  },
	  startCountdown() {
		const timer = setInterval(() => {
		  if (this.countdown > 1) {
			this.countdown--
		  } else {
			clearInterval(timer)
			this.countdown = 60
			this.isCounting = false
		  }
		}, 1000)
	  },
	  async handleSubmit() {
		if (!this.canSubmit) return
		
		if (!this.isAgreed) {
		  uni.showToast({
			title: '请先阅读并同意用户协议和隐私协议',
			icon: 'none'
		  })
		  return
		}
  
		try {
		  uni.showLoading({
			title: '登录中...'
		  })
  
		  const loginData = {
			login_type: 'phone',
			phone: this.phone,
			code: this.code
		  }
		  
		  const res = await userApi.login(loginData)
		  
		  uni.hideLoading()
		  
		  if (res.code === 200 && res.data.token) {
			// 确保正确保存token
			console.log('登录成功，获取到token:', res.data.token)
			uni.setStorageSync('token', res.data.token)
			
			// 可以同时保存用户信息（如果接口返回了的话）
			if (res.data.userInfo) {
			  uni.setStorageSync('userInfo', res.data.userInfo)
			}
			
			uni.showToast({
			  title: '登录成功',
			  icon: 'success',
			  duration: 1500
			})
			
			// 延迟跳转到 wode-dongtai 页面
			setTimeout(() => {
			  uni.redirectTo({
				url: '/pages/wode-dongtai/wode-dongtai'
			  })
			}, 1500)
		  } else {
			uni.showToast({
			  title: res.message || '登录失败',
			  icon: 'none'
			})
		  }
		} catch (error) {
		  uni.hideLoading()
		  uni.showToast({
			title: error.message || '登录失败',
			icon: 'none'
		  })
		}
	  },
	  goToAgreement(type) {
		uni.navigateTo({
		  url: `/pages/agreement/index?type=${type}`
		})
	  }
	}
  }
  </script>
  
  <style scoped>
  .page-container {
	min-height: 100vh;
	background-color: #fff;
	padding: 40rpx;
	margin-top:150px;
  }
  
  .input-group {
	background-color: #f5f5f5;
	border-radius: 44rpx;
	height: 88rpx;
	padding: 0 30rpx;
	margin-bottom: 30rpx;
	position: relative;
	z-index: 1;
  }
  
  .input {
	height: 88rpx;
	font-size: 28rpx;
	width: 100%;
	padding: 0;
	background: transparent;
  }
  
  .code-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
  }
  
  .code-group .input {
	width: 65%;
  }
  
  .code-btn {
	font-size: 28rpx;
	color: #8a2be2;
	padding: 0 20rpx;
	position: relative;
	z-index: 2;
	height: 88rpx;
	line-height: 88rpx;
	flex-shrink: 0;
  }
  
  .code-btn.disabled {
	color: #999;
  }
  
  .agreement-section {
	display: flex;
	align-items: center;
	margin: 40rpx 0;
  }
  
  .checkbox-wrapper {
	padding: 10rpx;
  }
  
  .checkbox {
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #999;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10rpx;
  }
  
  .checkbox.checked {
	background-color: #8a2be2;
	border-color: #8a2be2;
  }
  
  .check-mark {
	color: #fff;
	font-size: 24rpx;
  }
  
  .agreement-text {
	font-size: 24rpx;
	color: #999;
  }
  
  .link {
	color: #8a2be2;
  }
  
  .submit-btn {
	width: 100%;
	height: 88rpx;
	background-color: #333;
	color: #fff;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	margin-top: 60rpx;
  }
  
  .submit-btn.active {
	background-color: #000;
  }
  
  .submit-btn::after {
	border: none;
  }
  
  .submit-btn:active.active {
	opacity: 0.8;
  }
  </style>